<template>
  <div>
    <div class="client-main">
        <div class="receipt-main">
          <el-row :gutter="10" class="mb8">
            <el-col :span="24">
              <!-- 查询表单 -->
              <el-form :inline="true" :model="queryParams" ref="queryForm"  size="small" label-width="0" class="demo-form-inline" style="height: 40px;float: right;">
                <el-form-item prop="no">
                  <el-input
                    v-model="queryParams.no"
                    placeholder="收款单号"
                    clearable
                  />
                </el-form-item>
                <el-form-item style="width: 100px;" prop="auditStatus">
                  <el-select
                    v-model="queryParams.auditStatus"
                    placeholder="单据状态"
                    clearable
                  >
                    <el-option v-for="item in dict.audit_status"
                               :key="item.dictValue"
                               :label="item.dictLabel"
                               :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item >
                  <el-date-picker
                    v-model="billDsates"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="收款日期开始"
                    end-placeholder="收款日期结束">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="success" size="mini" :icon="queryParams.params.searchQuery?'el-icon-loading':''" @click="$refs.queryRef.show()">高级查询</el-button>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-empty description="暂无数据" v-if="receiptList.length < 1"></el-empty>
          <div  v-infinite-scroll="loadData"  infinite-scroll-disabled="busy" infinite-scroll-distance="10"  style="overflow:auto;height: 24rem;">
            <div class="container zuofei"
                 v-for="(item,index) in receiptList"
                 :key="index" :id="item.no"
            >
              <cornermark>{{dict.label.invoice_status[item.invoiceStatus]}}</cornermark>
           <!--   <cornermark class="flag" position="right" skin="bookmark">补录<br/>单据</cornermark>-->
              <table >
                <caption style="height: 30px;color: #303133;">
                  <h2>{{item.communityName}}收费单</h2>
                  <div>
                    <div style="border-bottom: 1px solid #303133; width:300px; margin-bottom: 2px;"></div>
                    <div style="border-bottom: 1px solid #303133; width:300px;"></div>
                  </div>
                </caption>
                <tbody>
                  <tr style="height:30px;">
                    <td valign="center" rowspan="1" colspan="3" style="text-align:left;border:none;"><el-checkbox @change="(v)=>selectNo(v,item.receiptId,index)" v-model="item.checked">单号：{{item.no}}</el-checkbox></td>
                  </tr>
                  <tr style="height:30px;">
                    <td valign="center" rowspan="1" colspan="2" style="text-align:left;border:none;">客户名称：{{item.ownerName}}</td>
                    <td valign="center" rowspan="1" colspan="4" style="text-align:center;border:none;">收款日期：{{item.billDate}}</td>
                    <td valign="center" rowspan="1" colspan="3" style="text-align:right;border:none;">收款人：{{item.billUser}}</td>
                  </tr>
                  <tr>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">房间名称</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">收费项目</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">费用区间</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">单价</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">应收金额</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">缴费周期</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">冲抵金额</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">实收金额</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">优惠金额</td>
                  </tr>
                  <template v-for="(detail,dlIndex) in item.receiptDetails" >
                    <tr :key="dlIndex">
                      <td  valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{detail.roomName}}</td>
                      <td  valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{itemFormat(detail)}}</td>
                      <td  valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">
                        {{detail.beginTime}}~{{detail.finishTime}}
                      </td>
                      <td  valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{detail.prices}}</td>
                      <td  valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">
                        <el-link type="primary" @click="handleCostDetails(detail)">{{detail.receivableMoney}}</el-link>
                      </td>
                      <td  valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{detail.paymentCycle,'{y}-{m}'|parseTime}}</td>
                      <td  valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{detail.amountAmount}}</td>
                      <td  valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{detail.billMoney}}</td>
                      <td  valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{detail.specialMoney}}</td>
                    </tr>
                  </template>
                  <tr>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">合计</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;" colspan="2" >{{item.billMoney|digitUppercase}}</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;"></td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{item.receivableMoney}}</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;"></td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{item.amountAmount}}</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{item.paidMoney}}</td>
                    <td valign="center" style="word-break: break-all; border-width: 1px; border-style: solid;">{{item.specialMoney}}</td>
                  </tr>
                  <tr><td colspan="9" align="left">优惠政策：{{item.favouredPolicyName}}</td></tr>
                  <tr><td colspan="9" align="left">说明：凭此收据换发票（押金除外），本收据收款单位盖章有效，手写无效（盖章处）</td></tr>
                  <tr>
                    <td colspan="9" align="left">
                      <span class="mr10">本次应收金额：{{item.receivableMoney}}</span>
                      <span class="mr10">收到金额：{{item.billMoney}}</span>
                      <span class="mr10">优惠金额：{{item.specialMoney}}</span>
                      <span class="mr10">冲抵金额：{{item.amountAmount}}</span>
                      <span class="mr10">转存金额：{{item.transferAmount}}</span>
                      <div class="fr">
                        <span class="mr20">
                          收款方式:
                          <template v-for="(mode,modeIndex) in item.modePayments">
                                {{dict.label.collection_method[mode.collectionMethod]}}[{{mode.billMoney}}]{{modeIndex != (item.modePayments.length-1)?',':'' }}
                          </template>
                        </span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <img src="@/assets/images/printTemplate/yishoukuan.png" v-if="item.auditStatus=='10001'" class="zuofei" >
              <img src="@/assets/images/printTemplate/yishenhe.png" v-if="item.auditStatus=='10002'" class="zuofei" >
              <img src="@/assets/images/printTemplate/zuofei.png" v-if="item.auditStatus=='10003'" class="zuofei" >
            </div>
          </div>
      </div>
    </div>
    <div class="operate-but">
      <el-button type="primary"  plain size="mini" @click="handleReturns">退费</el-button>
      <el-button type="primary"  plain size="mini" @click="handleNullify">作废单据</el-button>
      <el-button type="primary"  plain size="mini" @click="handleDelete">删除单据</el-button>
      <el-button type="primary" plain size="mini" :disabled="single" @click="handlePrint">补打单据</el-button>

    </div>
    <receipt-record ref="receivableRef" />

    <l-super-query ref="queryRef" keyName="PayDemand" :columns="queryColumns" @searchQuery="searchQuery" @resetting="queryParams.params.searchQuery=null"/>

    <print-receipt ref="printReceiptRef" />

  </div>
</template>

<script>

  import cornermark from '@/components/custom/cornerMark/index.vue';
  import { listReceipt ,nullify ,deleteReceipt} from "@/api/payfee/receipt";
  import { listItem } from "@/api/payfee/item";
  import ReceiptRecord from "@/views/payfee/tollCenter/receipt/receiptRecord"
  import PrintReceipt from "@/views/payfee/tollCenter/printTemplate/printReceipt"
export default {
  components: { cornermark ,ReceiptRecord,PrintReceipt },
  dicts:[ 'audit_status','invoice_status','collection_method' ],
  data() {
    return{
      //收费项目字典
      itemOptions:[],
      //收费类型字典
      projectOptions:[],
      //收款单明细
      receiptList:[],
      noFlag:false,
      busy:false,
      billDsates:[], //收款日期
      queryParams:{
        roomId:null,
        pageNum: 1,
        pageSize: 2,
        no:null,
        auditStatus: null,
        params:{}
      },
      selections:[],
      ids:[],
      single:false,//单选
      multiple:false, //多选
      queryColumns:[
        {title:'收款单号',key:'no',typeCode:'',type:'input',value:''},
        {title:'收款人',key:'bill_user',typeCode:'',type:'input',value:''},
        {title:'客户名称',key:'custom_name',typeCode:'',type:'input',value:'',alias:'tor'},
        // {title:'房屋编号',key:'roomId',type:'room',value:''},
      ],
    }
  },
  created(){
    listItem().then(res=>{
      this.itemOptions = res.rows;
    })
    this.selections = []
  },
  watch:{
    "receiptList":{
      handler(oldv,newv){
        this.getTotalForm()
      },
      deep:true
    }
  },
  methods:{
    init(options){
      this.receiptList = []
      this.currentOptions = options
      this.handleQuery()
      this.selections = []
    },
    loadData(){
      if(!this.noFlag){
        this.getList();
      }else{
        // this.msgError("没有更多数据了...")
      }
    },
    /** 查询收费单列表 */
    getList(queryFlag) {
      if(!this.currentOptions)return;
      this.busy = true;
      this.queryParams.roomId = this.currentOptions.roomIds
      let queryParams = this.addDateRange(this.queryParams,this.billDsates,"billDsate")
      listReceipt(queryParams).then(response => {
        let searchList = response.rows;
        if(searchList.length > 0){
          if(this.queryParams.pageNum==1){
            this.receiptList = searchList;
          } else{
            this.receiptList = this.receiptList.concat(searchList);//上拉拉把数据显示在最下方
          }
          //当前页数*每页多少行
          let currentNum = this.queryParams.pageNum * this.queryParams.pageSize
          if(currentNum >= response.total){
            this.noFlag = true
          }else{
            this.noFlag = false
            this.queryParams.pageNum++
          }
        }else{
          if(queryFlag){
            this.receiptList = []
          }else{
            this.msgError("没有更多数据了...")
            this.noFlag = true
          }
        }
        this.busy = false;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.billDsates = []
      this.queryParams.params = {}
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.noFlag = false
      this.queryParams.pageNum = 1;
      this.getList(true);
    },
    // 收费项目字典翻译
    itemFormat(row, column) {
      let index = this.itemOptions.findIndex(x=>x.chargeId == row.chargeId);
      if(index != -1){
        return this.itemOptions[index].chargeName
      }
      return '';
    },
    handleCostDetails(row){
      this.$refs.receivableRef.show({bean:row,type:'view',listFavouredPolicyOptions:[]})
    },
    getTotalForm(){
      for(let index in this.receiptList){
        let row = this.receiptList[index]
        let paidMoney = 0;
        for(let index1 in row.receiptDetails){
          let detail = row.receiptDetails[index1]
          paidMoney = this.$utils.add(paidMoney,detail.billMoney)
        }
        row['paidMoney'] = paidMoney;
      }
    },
    selectNo(FLAG,receiptId,index){
      let index_1 = this.selections.findIndex(x=>x.receiptId == receiptId)
      if(FLAG){
        if(index_1 == -1){
          this.selections.push(this.receiptList[index])
        }
      }else{
        if(index_1 != -1){
          this.selections.splice(index_1,1)
        }
      }
      this.ids = this.selections.map(item => item.receiptId)
      this.single = this.selections.length!==1
      this.multiple = !this.selections.length
    },
    //收款单作废
    handleNullify(){
      if(this.multiple){
        this.msgWarning("请选择需要作废的单据!")
        return
      }
      let nos = this.selections.map(item => item.no)
      let ids = this.ids
      this.$confirm('是否确认作废收款单号为"' + nos + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return nullify(ids);
      }).then(() => {
        this.handleQuery();
        this.msgSuccess("作废成功");
      }).catch(() => {});
    },
    handleDelete(){
      if(this.multiple){
        this.msgWarning("请选择需要删除的单据!")
        return
      }
      let nos = this.selections.map(item => item.no)
      let ids = this.ids
      this.$confirm('是否确认删除收款单号为"' + nos + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return deleteReceipt(ids);
      }).then(() => {
        this.handleQuery();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },
    searchQuery(queryParams){
      this.queryParams.params['searchQuery'] = queryParams
      this.getList(true)
    },
    handlePrint(){
      let row = this.selections[0]
      this.$refs.printReceiptRef.show({receiptData:row})
    },
    //退费
    handleReturns(){

    }
  }

};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  margin: 10px;
  /*box-shadow: 0px 0px 10px rgba(#000000, 0.5);*/
  border: 2px solid #cccccc;
  border-radius: 5px;
  padding: 10px;

  h2 {
    text-align: center;
    margin-bottom: 5px;
    margin-top: 0;
  }
  .title {
    font-size: 14px;
    span {
      margin-right: 20px;
    }
  }
  table {
    width: 100%;
    text-align: center;
    /* 表边框合并  两个单元格之间的边框进行合并 */
    border-collapse: collapse;
    margin: 0 auto;
    color: #868686;
  }

  table td,
  th {
    font-size: 12px;
    border: 1px #868686 solid;
    // background-color: white;
    // width: 100px;
    // height: 40px;
    line-height: 30px;
    padding:0 10px;
    box-sizing: border-box;
  }
  .flag{
    position: absolute;
    right: 30px;
    top: 0;
  }
  .zuofei{
    position: absolute;
    bottom: 10px;
    right: 300px;
    width: 110px;
    z-index: 10;
  }
}
.operate-but{
  text-align: center;
  margin-top: 20px;
}
</style>
